<template>
  <div class="tab-bar">
    <slot></slot>
  </div>
</template>

<script setup>
import { provide,reactive } from 'vue';

const props = defineProps({
    modelValue:{
        type:Number,
        default:0,
    }
})
const emit = defineEmits(['update:modelValue'])

const setActive = (index) => {
    emit('update:modelValue',index)
}

const children = reactive([])
provide('TabBar',{
    children,
    link:(child) => {
        if(child){
            children.push(child)
        }
    },
    props,
    setActive,
})
</script>

<style scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  height: 40px;
  background-color: skyblue;
  box-shadow: 0 -1px 3px rgb(0, 0, 0, 0.3);
}
</style>
